<template>
    <div  style="background-color: #ffffff;">
        <el-row>
            <el-col :span="24" style="border: 1px solid skyblue;">
                <div style="height: 200px;width: 100%;">
                    <div style="margin-top: 30px;width: 100%;height: 30px;border:1px solid black ;">
                        <span class="spancss">板卡异常Top5</span>
                        <span style="">
                            <el-radio-group v-model="radio1" size="mini" @input="selectChange1($event)">
                                <el-radio-button v-for="(item, index) in carException" :key="index" :label="item"
                                class="ellipsis-btn"  style="margin-left: 15px;border:2px solid skyblue;">{{ item }}</el-radio-button>
                            </el-radio-group>
                        </span>

                    </div>
                    <div style="margin-top: 30px;width: 100%;height: 30px;border:1px solid black ;">
                        <span class="spancss">OC异常Top5 </span>
                        <el-radio-group v-model="radio2" size="mini" @input="selectChange2($event)">
                            <el-radio-button v-for="(item, index) in ocException" :key="index" :label="item"
                            class="ellipsis-btn" style="margin-left: 15px;border:2px solid skyblue;">{{ item }}</el-radio-button>
                        </el-radio-group>
                    </div>
                    <div style="margin-top: 30px;width: 100%;height: 30px;border:1px solid black ;">
                        <span class="spancss">电源异常Top5</span>
                        <el-radio-group v-model="radio3" size="mini" @input="selectChange3($event)">
                            <el-radio-button v-for="(item, index) in powerException" :key="index" :label="item"
                               class="ellipsis-btn" style="margin-left: 15px;border:2px solid skyblue;">{{ item }}</el-radio-button>
                        </el-radio-group>
                    </div>
                    <!-- <el-row>
                        <el-col style="border: 1px solid blue;height: 200px;width: 15%;">
                            <span style="width: 33px;height: 33%;background-color: bisque;">1</span>
                            <span style="width: 33px;height: 33%;background-color: bisque;">2</span>
                            <span style="width: 33px;height: 33%;background-color: bisque;">3</span>
                        </el-col>
                        <el-col style="border: 1px solid blue;height: 100%;width: 100%;">
                        </el-col>
                    </el-row> -->
                </div>
                <div style="border: 1px solid skyblue;height: 300px;width: 100%;float: left;">
                    <div id="chart13"
                        style="border: 1px solid skyblue;height: 100%;width: 33%;float: left;text-align: center;"></div>
                    <div id="chart23"
                        style="border: 1px solid skyblue;height: 100%;width: 33%;float: left;text-align: center;"></div>
                    <div id="chart33"
                        style="border: 1px solid skyblue;height: 100%;width: 34%;float: left;text-align: center;"></div>
                </div>
            </el-col>
            <!-- <el-col :span="12">
                <div id="chart2" style="border: 1px solid skyblue;height: 400px;width: 100%;text-align: center;"></div>
            </el-col> -->
        </el-row>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import { getAdBoardTop5, getLcmOcTop5, getPowerSupplyTop5 } from '@/api/business/project';
import { getExceptionCodeTypeDate } from '@/api/business/bugs';
export default {
    name: 'Model3',
    data() {
        return {
            radio1: '',
            radio2: '',
            radio3: '',
            carException:
                [
                    // "J-LQ-570-FV1", "J-LQ-570-FV2", "J-LQ-570-FV3", "J-LQ-570-FV4", "J-LQ-570-FV5"
                ]
            ,
            ocException: [
                // 'AUO9 MOO29Q8EHQWEU', 'AUO8 MOO29Q8EHQWEU', 'AUO7 MOO29Q8EHQWEU', 'AUO6 MOO29Q8EHQWEU', 'AUO5 MOO29Q8EHQWEU'
            ],
            powerException: [
                // '电源板MOO29Q8EHQWEU', '电源板8MOO29Q8EHQWEU', '电源板7MOO29Q8EHQWEU', '电源板6MOO29Q8EHQWEU', '电源板5MOO29Q8EHQWEU'
            ],
            titleList: [
                // "黑屏", "闪屏", "花屏", "睡眠唤不醒", "闪线", "宕机"
            ],
            param: {
                adBoard: null,
                lcmOc: null,
                powerSupply: null
            }
        };
    },
    computed: {
    },
    watch: {
    },
    mounted() {
        
    },
    created() {
        this.getAdBoardTop5Count()
        this.getLcmOcTop5Count()
        this.getPowerSupplyTop5Count() 
    },
    methods: {
        initEChart1(data1) {
            var myChart1 = echarts.init(document.getElementById('chart13'));
            // var myChart2 = echarts.init(document.getElementById('chart23'));
            // var myChart3 = echarts.init(document.getElementById('chart33'));
            const option1 = {
                title: {
                    text: '板卡异常Top5',
                    position: 'center',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: data1[0]?data1[0]:[],
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: { interval: 0, rotate: 30 }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '数量',
                        type: 'bar',
                        barWidth: '60%',
                        data: data1[1]?data1[1]:[],
                        label: {
                            show: true,
                            position: 'top',
                            valueAnimation: true
                        }
                    }
                ]
            };

            // const option2 = {
            //     title: {
            //         text: 'OC异常Top5',
            //         position: 'center',
            //         left: 'center'
            //     },
            //     tooltip: {
            //         trigger: 'axis',
            //         axisPointer: {
            //             type: 'shadow'
            //         }
            //     },
            //     grid: {
            //         left: '3%',
            //         right: '4%',
            //         bottom: '3%',
            //         containLabel: true
            //     },
            //     xAxis: [
            //         {
            //             type: 'category',
            //             data: this.titleList,
            //             axisTick: {
            //                 alignWithLabel: true
            //             },
            //             axisLabel: { interval: 0, rotate: 30 }
            //         }
            //     ],
            //     yAxis: [
            //         {
            //             type: 'value'
            //         }
            //     ],
            //     series: [
            //         {
            //             name: '数量',
            //             type: 'bar',
            //             barWidth: '60%',
            //             data: [52, 200, 334, 390, 330, 231],
            //             label: {
            //                 show: true,
            //                 position: 'top',
            //                 valueAnimation: true
            //             }
            //         }
            //     ]
            // };

            // const option3 = {
            //     title: {
            //         text: '电源异常Top5',
            //         position: 'center',
            //         left: 'center'
            //     },
            //     tooltip: {
            //         trigger: 'axis',
            //         axisPointer: {
            //             type: 'shadow'
            //         }
            //     },
            //     grid: {
            //         left: '3%',
            //         right: '4%',
            //         bottom: '3%',
            //         containLabel: true
            //     },
            //     xAxis: [
            //         {
            //             type: 'category',
            //             data: this.titleList,
            //             axisTick: {
            //                 alignWithLabel: true
            //             },
            //             axisLabel: { interval: 0, rotate: 30 }
            //         }
            //     ],
            //     yAxis: [
            //         {
            //             type: 'value'
            //         }
            //     ],
            //     series: [
            //         {
            //             name: '数量',
            //             type: 'bar',
            //             barWidth: '60%',
            //             data: [52, 200, 334, 390, 330, 150],
            //             label: {
            //                 show: true,
            //                 position: 'top',
            //                 valueAnimation: true
            //             }
            //         }
            //     ]
            // };
            
            myChart1.setOption(option1);
            
            
            // myChart2.setOption(option2);
            // myChart3.setOption(option3);
        },
        initEChart2(date2) {
            var myChart2 = echarts.init(document.getElementById('chart23'));

            const option2 = {
                title: {
                    text: 'OC异常Top5',
                    position: 'center',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: date2[0]?date2[0]:[],
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: { interval: 0, rotate: 30 }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '数量',
                        type: 'bar',
                        barWidth: '60%',
                        data: date2[1]?date2[1]:[],
                        label: {
                            show: true,
                            position: 'top',
                            valueAnimation: true
                        }
                    }
                ]
            };

            myChart2.setOption(option2);
        },
        initEChart3(date3) {

            var myChart3 = echarts.init(document.getElementById('chart33'));

            const option3 = {
                title: {
                    text: '电源异常Top5',
                    position: 'center',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: date3[0]?date3[0]:[],
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: { interval: 0, rotate: 30 }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '数量',
                        type: 'bar',
                        barWidth: '60%',
                        data: date3[1]?date3[1]:[],
                        label: {
                            show: true,
                            position: 'top',
                            valueAnimation: true
                        }
                    }
                ]
            };

            myChart3.setOption(option3);
        },
        // 销毁Echarts
        destoryChar1() {
            if (echarts.getInstanceByDom(document.getElementById('chart13'))) {
                echarts.dispose(document.getElementById('chart13'))
            }
        },
        // 销毁Echarts
        destoryChar2() {
            if (echarts.getInstanceByDom(document.getElementById('chart23'))) {
                echarts.dispose(document.getElementById('chart23'))
            }
        },
        // 销毁Echarts
        destoryChar3() {
            if (echarts.getInstanceByDom(document.getElementById('chart33'))) {
                echarts.dispose(document.getElementById('chart33'))
            }
        },
        getAdBoardTop5Count() {
            getAdBoardTop5().then(res => {
                this.carException = res.data
                this.radio1 = this.carException[0] ? this.carException[0] : ''
                this.param.adBoard = this.radio1
                this.getExceptionCodeType("1")
            })
        },
        getLcmOcTop5Count() {
            getLcmOcTop5().then(res => {
                this.ocException = res.data
                this.radio2 = this.ocException[0] ? this.ocException[0] : ''
                this.param.lcmOc = this.radio2
                this.getExceptionCodeType("2")
            })
        },
        getPowerSupplyTop5Count() {
            getPowerSupplyTop5().then(res => {
                this.powerException = res.data
                this.radio3 = this.powerException[0] ? this.powerException[0] : ''
                this.param.powerSupply = this.radio3
                this.getExceptionCodeType("3")
            })
        },
        getExceptionCodeType(flag) {
            if (flag === '1') {//adBoard
                const param = {}
                param.adBoard=this.param.adBoard
                getExceptionCodeTypeDate(param).then(res => {
                    // console.log("adBoard")
                    // console.log(res)
                    this.destoryChar1()
                    this.initEChart1(res.data)
                })
            } else if (flag === '2') {//lcmOc
                const param = {}
                param.lcmOc=this.param.lcmOc
                getExceptionCodeTypeDate(param).then(res => {
                    // console.log("lcmOc")
                    // console.log(res)
                    this.destoryChar2()
                    this.initEChart2(res.data)
                })
            } else if (flag === '3') {//powerSupply
                const param = {}
                param.powerSupply=this.param.powerSupply
                getExceptionCodeTypeDate(param).then(res => {
                    // console.log("powerSupply")
                    // console.log(res)
                    this.destoryChar3()
                    this.initEChart3(res.data)
                })
            }
        },
        selectChange1(event) {
            this.param.adBoard=event
            console.log(event)
            this.getExceptionCodeType("1")
        },
        selectChange2(event) {
            this.param.lcmOc=event
            console.log(event)
            this.getExceptionCodeType("2")
        },
        selectChange3(event) {
            this.param.powerSupply=event
            console.log(event)
            this.getExceptionCodeType("3")
        },
    },
};
</script>

<style scoped>
.spancss {
    background-color: skyblue;
    height: 30px;
}
.ellipsis-btn {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 250px; /* 你可以根据需要设置最大宽度 */
}
</style>
